<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="开始时间" prop="beginTime">
        <el-date-picker clearable size="small" v-model="queryParams.beginTime" type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss" default-time="['00:00:00']" placeholder="选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截止时间" prop="endTime">
        <el-date-picker clearable size="small" v-model="queryParams.endTime" default-time="['23:59:59']" type="datetime"
          placeholder="请选择结束时间" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务类目" prop="categoryId">
        <el-select v-model="queryParams.categoryId" placeholder="选择服务类目" clearable filterable size="small">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="dict in categoryOptions" :key="dict.category_id" :label="dict.name"
            :value="dict.category_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>

    </el-form>

    <div class="cards-grid">
      <!-- v-for="(item, index) in statsData" :key="index" -->
      <div class="stat-card color-1">
        <div class="circle-container">
          <div class="rotating-circle"></div>
          <div class="content">
            <div class="value">{{ cardData.orderCount ? cardData.orderCount : 0 }}</div>
            <div class="label">总笔数</div>
          </div>
        </div>
      </div>
      <div class="stat-card color-1">
        <div class="circle-container">
          <div class="rotating-circle"></div>
          <div class="content">
            <div class="value">{{ cardData.cashoutAmount ? cardData.cashoutAmount : '0.00' }}</div>
            <div class="label">提现金额</div>
          </div>
        </div>
      </div>
      <div class="stat-card color-2">
        <div class="circle-container">
          <div class="rotating-circle"></div>
          <div class="content">
            <div class="value">{{ cardData.orderAmount?cardData.orderAmount:'0.00' }}</div>
            <div class="label">总收入</div>
          </div>
        </div>
      </div>
      <div class="stat-card color-3">
        <div class="circle-container">
          <div class="rotating-circle"></div>
          <div class="content">
            <div class="value">{{ cardData.receivePrice?cardData.receivePrice:'0.00' }}</div>
            <div class="label">总支出</div>
          </div>
        </div>
      </div>
      <div class="stat-card color-4">
        <div class="circle-container">
          <div class="rotating-circle"></div>
          <div class="content">
            <div class="value">{{ cardData.profitRate?cardData.profitRate:'0.00%' }}</div>
            <div class="label">利润率</div>
          </div>
        </div>
      </div>
            <div class="stat-card color-5">
        <div class="circle-container">
          <div class="rotating-circle"></div>
          <div class="content">
            <div class="value">{{ cardData.profit?cardData.profit:'0.00' }}</div>
            <div class="label">利润额</div>
          </div>
        </div>
      </div>
    </div>

    <div class="chart-wrapper">
      <h4 style="color: #007DFF;font-size: 24px;font-weight: bold;padding: 15px 0;">服务类目Top10</h4>
      <bar-chart ref="barChart" />
    </div>

  </div>
</template>

<script>
import BarChart from './components/SettleChart.vue'
import { queryOrderCountByParam, queryOrderAmountByParam, queryReceivePriceByParam, queryOrderCategoryList } from "@/api/order/settleAccounts";
export default {
  components: {
    BarChart
  },
  data() {
    return {

      showSearch: true,
      // 查询参数
      queryParams: {
        beginTime: null,
        endTime: null,
        categoryId: null
      },

      cardData: {},
      // statsData: [
      //   { label: '收入总笔数', value: '1,248' },
      //   { label: '收入总金额', value: '¥356,890' },
      //   { label: '支出总笔数', value: '896' },
      //   { label: '支出总金额', value: '¥187,560' },
      //   // { label: '利润', value: '¥169,330' },
      //   { label: '利润率', value: '47.5%' },
      //   // { label: '总笔数', value: '2,144' },
      //   // { label: '总收入金额', value: '¥544,450' },
      //   // { label: '平均客单价', value: '¥286.50' }
      // ],
      orderCount: null,
      orderAmount: null,
      categoryOptions: []
    }
  },
  created() {
    this.getOrderCategoryList();

    this.getOrderCountByParam()

    // this.getOrderAmountByParam()

    // this.getReceivePriceByParam()
  },
  methods: {
    getOrderCountByParam() {
      queryOrderCountByParam(this.queryParams).then(response => {
        // this.orderCount = response.rows;
        this.cardData = response.data

        console.log("card:", this.cardData)
      });
    },

    // getOrderAmountByParam() {
    //   queryOrderAmountByParam(this.queryParams).then(res => {
    //     // this.orderAmount = res
    //     console.log(res)
    //   })
    // },
    // getReceivePriceByParam() {
    //   queryReceivePriceByParam(this.queryParams).then(res => {
    //     // this.orderAmount = res
    //   })
    // },
    handleQuery() {


      this.getOrderCountByParam()

      // this.getOrderAmountByParam()

      // this.getReceivePriceByParam()

      this.$refs.barChart.fetchChartData(this.queryParams)
    },
    resetQuery() {
      this.daterangeOrderTime = [];
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getOrderCategoryList() {
      queryOrderCategoryList().then(res => {
        this.categoryOptions = res.data

        console.log("categoryOptions", this.categoryOptions)
      })
    },
  },


}



</script>

<style>
.stats-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

h2 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 15px;
}

.description {
  text-align: center;
  color: #7f8c8d;
  margin-bottom: 40px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 25px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.circle-container {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rotating-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: rotate 12s linear infinite;
}

.content {
  position: relative;
  text-align: center;
  z-index: 2;
  background: white;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #2c3e50;
}

.label {
  font-size: 14px;
  color: #34495e;
  line-height: 1.4;
  padding: 0 10px;
}

/* 旋转动画 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 淡色系配色方案 */
.color-1 .rotating-circle {
  background: conic-gradient(#a8e6cf 0%, #a8e6cf 30%, #dcedc1 30%, #dcedc1 55%, #ffd3b6 55%, #ffd3b6 75%, #ffaaa5 75%, #ffaaa5 100%);
}

.color-2 .rotating-circle {
  background: conic-gradient(#b5e8f7 0%, #b5e8f7 40%, #c9f7e3 40%, #c9f7e3 70%, #d6f8b8 70%, #d6f8b8 100%);
}

.color-3 .rotating-circle {
  background: conic-gradient(#ffd6e7 0%, #ffd6e7 35%, #ffefd6 35%, #ffefd6 65%, #c6f8e5 65%, #c6f8e5 100%);
}

.color-4 .rotating-circle {
  background: conic-gradient(#e6d4f7 0%, #e6d4f7 25%, #d4e6f7 25%, #d4e6f7 60%, #f7d4e6 60%, #f7d4e6 100%);
}

.color-5 .rotating-circle {
  background: conic-gradient(#d4f7f7 0%, #d4f7f7 45%, #e6f7d4 45%, #e6f7d4 70%, #f7f7d4 70%, #f7f7d4 100%);
}

.color-6 .rotating-circle {
  background: conic-gradient(#f7e6d4 0%, #f7e6d4 30%, #f7d4e6 30%, #f7d4e6 60%, #e6d4f7 60%, #e6d4f7 100%);
}

.color-7 .rotating-circle {
  background: conic-gradient(#d4f7e6 0%, #d4f7e6 35%, #d4e6f7 35%, #d4e6f7 65%, #e6d4f7 65%, #e6d4f7 100%);
}

.color-8 .rotating-circle {
  background: conic-gradient(#f7f7d4 0%, #f7f7d4 40%, #f7e6d4 40%, #f7e6d4 70%, #f7d4d4 70%, #f7d4d4 100%);
}

.color-9 .rotating-circle {
  background: conic-gradient(#d4f7f0 0%, #d4f7f0 30%, #d4f0f7 30%, #d4f0f7 65%, #f0d4f7 65%, #f0d4f7 100%);
}

.color-1 {
  border-top: 5px solid #a8e6cf;
}

.color-2 {
  border-top: 5px solid #b5e8f7;
}

.color-3 {
  border-top: 5px solid #ffd6e7;
}

.color-4 {
  border-top: 5px solid #e6d4f7;
}

.color-5 {
  border-top: 5px solid #d4f7f7;
}

.color-6 {
  border-top: 5px solid #f7e6d4;
}

.color-7 {
  border-top: 5px solid #d4f7e6;
}

.color-8 {
  border-top: 5px solid #f7f7d4;
}

.color-9 {
  border-top: 5px solid #d4f7f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  .circle-container {
    width: 160px;
    height: 160px;
  }

  .content {
    width: 120px;
    height: 120px;
  }

  .value {
    font-size: 18px;
  }

  .label {
    font-size: 13px;
  }
}

.chart-wrapper {
  /* padding: 30px; */
  margin: 30px;
}
</style>
